import type { RootState } from '../../../../store'
import { updateCollapse } from '../../../../store/modules/menu'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import { useDispatch, useSelector } from 'react-redux'

const CollapseIcon = () => {
  const { isCollapse } = useSelector((state: RootState) => state.menu)
  const dispatch = useDispatch()

  return (
    <div
      className="collapse"
      onClick={() => {
        dispatch(updateCollapse(!isCollapse))
      }}
      >
        {
          isCollapse? <MenuUnfoldOutlined id='isCollapse' /> : <MenuFoldOutlined id='isCollapse' />
        }
      </div>
  )
}

export default CollapseIcon